<!-- 核销记录 -->
<template>
	<view>
		<!-- 头部背景 -->
		<view class="headCss"></view>

		<!-- 搜索框 -->
		<uni-search-bar radius="40"  v-model="search"  placeholder="输入需要搜索的内容" cancelText="搜索" cancelButton="none" bgColor="#fff" @confirm="searchValue" />
		
		<!-- 内容 -->
		<view class="headText" v-for="(item,index) in context" :key="index">
			<text>{{item.serve}}</text>
			<view class="div-line" />
			<text>下单用户：{{item.userName}}</text>
			<text>实付金额：￥{{item.payPrice}}</text>
			<text>核销时间：{{item.time}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search:'',
				context:[
					{
						serve:'普通洗车',
						userName:'张三',
						payPrice:32.99,
						time:'2022-10-12 11:00:00'
					},
					{
						serve:'加油',
						userName:'张三',
						payPrice:312.99,
						time:'2022-10-12 11:00:00'
					},{
						serve:'嘻嘻',
						userName:'张三',
						payPrice:32.99,
						time:'2022-10-12 11:00:00'
					},
				]
				
			}
		},

		methods: {
			searchValue(e){
				console.log(e);
			}
		}
	}
</script>

<style scoped>
	.headCss {
		background-color: #3385fd;
		width: 750rpx;
		height: 300rpx;
		position: fixed;
	}

	.headText {
		background-color: #fff;
		border-radius: 20rpx;
		width: 710rpx;
		/* min-height: 400rpx; */
		margin-left: 20rpx;
		position: relative;
		margin-top: 30rpx;
	}
	.headText > text{
		display: block;
		padding: 20rpx 20rpx 0rpx 20rpx;
	}
	.headText>text:nth-child(1){
		font-size: large;
	}
	.headText>text:last-child{
		color: #7e7e7e;
		padding-bottom: 30rpx;
	}

	

	/* 分割线 */
	.div-line {
		width: 670rpx;
		margin: 20rpx 20rpx 10rpx 20rpx;
		height: 10rpx;
		background-color: #f7f7f7;
		border-radius: 10rpx;
	}

	
</style>